<template>
	<view class='productSort'>
		<view class="title">
			选择服务
			<text class="iconfont icon-guanbi5" @click="close"></text>
		</view>
		<view class="con-box">
			<view class='aside'>
				<scroll-view scroll-y="true" style="height: 100%; overflow: hidden;">
					<view v-for="(item,index) in productList" :key="item.label_id">
						<view class='item acea-row row-center-wrapper' :class='index==navActive?"on":""' @click='tap(index,"b"+index)'><text class="item_text">{{item.label.label_name}}</text>
						 </view>
					</view>
				</scroll-view>
			</view>
			<view class='conter'>
				<scroll-view scroll-y="true" style="height: 100%; overflow: hidden;" @scrolltolower="loadMoreData">
					<blcok v-if="childList.length">
						<view v-for="(item,index) in childList" :key="item.community_id">
							<view class='list'>			
								<view class='item acea-row'>
									<view class="name line1">{{item.title}}</view>
									<view class="check_label" @click.stop="confirmTopic(item)">选择</view>
								</view>
							</view>
						</view>
					</blcok>
					<block v-else>
						<view class="release_btn button" @click="goUrl('/pages/plantGrass/plant_release/index?type=1&circle_id=0')">点击添加服务</view>
					</block>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	 
	let app = getApp();
	import { getCommunityUser, getCommunityLabelUser } from '@/api/community.js';
	import { getLabelList } from '@/api/api.js';
	import { getListCircle, getAttentionCircle } from '@/api/circle.js';
	export default {
		data() {
			return {
				navlist: [],
				productList: [],
				navActive: 0,
				childList: [],
				label_id: 0,
				is_next_page_true: true,
				page: 1,
				limit: 10
			}
		},
		watch:{},
		mounted() {
			this.getCommunityLabelUsers();
		},
		methods: {
			goUrl(url) {
				if (!url) {
					return false;
				}
				this.$util.Tips(url)
			},
			getCommunityLabelUsers()
			{
				let that = this;
				let data = {type: 1}
				getCommunityLabelUser(data).then(res=> {
					that.productList = res.data
					if(that.productList.length){
						that.getCommunityUsers();
					}
				}).catch(err=>{
					
				})
			},
			getCommunityUsers()
			{
				let that = this;
				if(!that.is_next_page_true) return false;
				let data = {
					is_type: 1,
					status: 1,
					label_id: that.productList[that.navActive].label_id,
					page: that.page,
					limit: that.limit,
				}
				getCommunityUser(data).then(res => {
					if(res.status == 200)
					{
						that.childList = that.childList.concat(res.data.list)
						that.is_next_page_true = res.data.list.length >= that.limit;
						that.page++
					}
				}).catch(err=>{
				})
			},
			loadMoreData()
			{
				this.getCommunityUsers();
			},
			// 点击关闭按钮
			close() {
				this.$emit('close');
			},
			tap: function(index, id) {
				let label = this.productList[index];
				this.navActive = index;
				this.label_id = label.label_id
				this.is_next_page_true = true;
				this.page = 1;
				this.childList = [];
				this.getCommunityUsers();
			},
			confirmTopic(item){
				this.$emit('getTopic',item);
			}	
		}
	}
</script>
<style scoped lang="scss">
	.productSort {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 70vh;
		background: #ffffff;
		border-radius: 16rpx 16rpx 0 0;
		.title{
			text-align: center;
			padding: 40rpx 0;
			position: relative;
			color: #333333;
			font-size: 34rpx;
			font-weight: bold;
			.iconfont{
				color: #8A8A8A;
				font-size: 28rpx;
				position: absolute;
				right: 30rpx;
				top: 42rpx;
				font-weight: normal;
			}
		}
		.con-box {
			flex: 1;
			display: flex;
			overflow: hidden;
		}
	}
	.productSort .aside {
		overflow-y: auto;
		overflow-x: hidden;
		border-right: 1px solid #EEEEEE;
		width: 202rpx;
		height: 100%;
		overflow: hidden;
	}
	.productSort .aside .item {
		line-height: 100rpx;
		width: 100%;
		font-size: 26rpx;
		color: #666666;
	}
	.productSort .aside .item_text {
		padding-left: 20rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	.productSort .aside .item.on {
		width: 100%;
		text-align: center;
		font-weight: bold;
		color: #333333;
	}
	.productSort .conter {
		flex: 1;
		height: 100%;
		padding: 0 30rpx;
		background-color: #ffffff;
		margin-top: 20rpx;
		overflow: hidden;
	}
	.productSort .conter .list {
		flex-wrap: wrap;	
	}
	.productSort .conter .list .item {
		margin-top: 26rpx;
		margin-bottom: 40rpx;
		align-items: center;
	}
	.productSort .conter .list .item .picture {
		width: 88rpx;
		height: 88rpx;
		border-radius: 100%;
		position: relative;
		// &::before{
		// 	content: "#";
		// 	display: block;
		// 	width: 88rpx;
		// 	height: 88rpx;
		// 	line-height: 88rpx;
		// 	border-radius: 100%;
		// 	color: #ffffff;
		// 	font-size: 40rpx;
		// 	text-align: center;
		// 	position: absolute;
		// 	top: 0;
		// 	left: 0;
		// 	background: rgba(0,0,0,.3);
		// }
	}
	.productSort .conter .listw:first-child .picture{
		&::before{
			content: "\\";
			background: #D8D8D8;
		}
	}
	.productSort .conter .list .item .picture image {
		width: 100%;
		height: 100%;
		border-radius: 100%;
	}
	.productSort .conter .list .name {
		margin-left: 30rpx;
		font-size: 28rpx;
		color: #282828;
		font-weight: bold;
		flex: 1;
	}
	.productSort .conter .list .check_label{
		margin-left: auto;
		font-size: 28rpx;
		color: #282828;
		font-weight: bold;
		max-width: 300rpx;
		background-color: #FFE60F;
		padding: 20rpx;
		border-radius: 30rpx;
	}
	.button{
		height: 86rpx;
		line-height: 86rpx;
		color: #201B17;
		text-align: center;
		font-size: 32rpx;
		background: var(--view-theme);
		border-radius: 43rpx;
	}
	.release_btn{
		margin-top: 30rpx;
	}
</style>